<template>
  <div>
    <a-row :gutter="16" style="margin-bottom: 20px">
      <a-col :span="8">
        <a-card title="计划开课学时">
          <h2>2560</h2>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="已排课学时">
          <h2>2345</h2>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="未排课学时">
          <h2 style="color: red">215</h2>
        </a-card>
      </a-col>
    </a-row>
    
    <a-table 
      :columns="columns" 
      :dataSource="data" 
      :pagination="{ pageSize: 10 }"
    >
      <template slot="unarranged" slot-scope="text, record">
        <span v-if="record.unarranged > 0" style="color: red">{{ record.unarranged }}</span>
        <span v-else>{{ record.unarranged }}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '课程代码',
    dataIndex: 'courseCode',
    key: 'courseCode'
  },
  {
    title: '课程名称',
    dataIndex: 'courseName',
    key: 'courseName'
  },
  {
    title: '计划学时',
    dataIndex: 'planned',
    key: 'planned'
  },
  {
    title: '已排学时',
    dataIndex: 'arranged',
    key: 'arranged'
  },
  {
    title: '未排学时',
    dataIndex: 'unarranged',
    key: 'unarranged',
    scopedSlots: { customRender: 'unarranged' }
  }
]

const data = [
  {
    key: '1',
    courseCode: 'CS101',
    courseName: '计算机基础',
    planned: 64,
    arranged: 64,
    unarranged: 0
  },
  {
    key: '2',
    courseCode: 'CS201',
    courseName: '数据结构',
    planned: 48,
    arranged: 32,
    unarranged: 16
  },
  {
    key: '3',
    courseCode: 'CS301',
    courseName: '算法分析',
    planned: 48,
    arranged: 48,
    unarranged: 0
  },
  {
    key: '4',
    courseCode: 'CS401',
    courseName: '数据库系统',
    planned: 64,
    arranged: 48,
    unarranged: 16
  },
  {
    key: '8',
    courseCode: 'CS202',
    courseName: '操作系统',
    planned: 64,
    arranged: 32,
    unarranged: 32
  },
  {
    key: '9',
    courseCode: 'CS302',
    courseName: '计算机网络',
    planned: 48,
    arranged: 48,
    unarranged: 0
  },
  {
    key: '10',
    courseCode: 'CS402',
    courseName: '软件工程',
    planned: 48,
    arranged: 32,
    unarranged: 16
  }
]

export default {
  data() {
    return {
      columns,
      data
    }
  }
}
</script>